<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="app">
    <p>
        {{messge}}
    </p>
    <cpn></cpn>
    <cpn2></cpn2>
    <cpn3></cpn3>
    <cpn4></cpn4>
</div>

<script type="text/x-template" id="cnp3">
    <div>
        这是script的分离模板哦
    </div>
</script>

<template id="cpn4">
    <div>
        {{title}}
        这是template分离模板
        {{footer}}
    </div>
</template>

<script src="../js/vue.js"></script>
<script>
  Vue.component('cpn', {
    template: `
        <div>这是全局组件</div>
      `
  });

  Vue.component('cpn3', {
    template: '#cnp3'
  })

  Vue.component('cpn4', {
    template: '#cpn4',
    data() {
      return {
        title: '我是title',
        footer:'我是footer'
      }
    }
  })
  const app = new Vue({
    el: '#app',
    data: {
      messge: '这是信息'
    },
    components: {
      cpn2: {
        template: `
         <div>这是局部组件</div>
        `
      }
    }
  })
</script>

</body>
</html>